import { defineComponent, computed, ref, provide, watchEffect } from 'vue'
import { useWindowSize } from '@vueuse/core'
import MenuLeft from '@yang/components/menu/index'
import Nav from '@yang/components/nav/index'
import History from '@yang/components/nav/history'
import YangRouter from '@yang/components/yangRouter/index'
import laYoutStyle from './style/index.module.scss'

export default defineComponent({
  components: {
    MenuLeft
  },
  setup() {
    const isOpen = ref(false)
    const isOpenChange = () => {
      isOpen.value = !isOpen.value
    }

    provide('isOpen', isOpen)
    provide('isOpenChange', isOpenChange)
    const { width } = useWindowSize()
    const menuName = computed(() => {
      if (width.value >= 1200) {
        return 'pc'
      }
      if (width.value >= 900) {
        return 'ipad'
      }
      return 'phone'
    })

    watchEffect(() => {
      if (width.value >= 900) {
        isOpen.value = true
      } else {
        isOpen.value = false
      }
    })
    return () => (
      <>
        <div class={` ${laYoutStyle.layout}`}>
          <MenuLeft component={menuName.value}></MenuLeft>
          <div class="ymain flex">
            <Nav width={width.value} />
            {width.value < 900 && (
              <div class="nav-history">
                <History />
              </div>
            )}
            <div class="content">
              <YangRouter />
            </div>
          </div>
        </div>
      </>
    )
  }
})
